<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-展开运算符</title>
</head>

<body>
    <script type="text/javascript">
        let arr1 = [1, 3, 5, 7, 9]
        let arr2 = [2, 4, 6, 8, 10]
        // 1. 展开一个数组
        console.log(...arr1); // 1 3 5 7 9
        // 2. 连接数组
        let arr3 = [...arr1, ...arr2]
        console.log(...arr3); // 1 3 5 7 9 2 4 6 8 10

        // 3. 在函数中使用
        function sum(...numbers) {
            return numbers.reduce((preValue, currentValue) => {
                return preValue + currentValue
            })
        }
        console.log(sum(1, 2, 3, 4)); // 10

        // 4. 构造字面量对象时使用展开语法
        let person = {
            name: 'tom',
            age: 18
        }

        // console.log(...person); // 报错，展开运算符不能展开对象
        console.log({ ...person }) // {name: "tom", age: 18}

        let person2 = { ...person } // 可以拷贝一个对象
        person.name = 'jerry'
        console.log(person2); // {name: "tom", age: 18}
        console.log(person); // {name: "jerry", age: 18}

        // 5. 合并对象
        let person3 = {
            ...person,
            name: 'jack',
            address: "地球"
        }
        console.log(person3); // {name: "jack", age: 18, address: "地球"}

    </script>
</body>

</html>